import React, { Component } from "react";
import { Table, Tag, Space, Button, Modal } from "antd";
import { ExclamationCircleOutlined } from "@ant-design/icons";
import { bannerList,bannerDel } from "../../api/goods";
import qs from "query-string";
import { connect } from "react-redux";

// const data = [ //默认测试数据包
//   {
//     objectId:'asdfasdf',
//     bname:'所有蛋糕',
//     bid:11,
//     num:30
//   }
// ];
class BannerList extends Component {
  state = {
    list: [],
    page:1
  };
  columns = [
    {
      title: "ObjectId",
      dataIndex: "objectId",
      key: "objectId",
      render: (text) => <a>{text}</a>,
    },
    {
      title: "活动名称",
      dataIndex: "title",
      key: "title",
    },
    {
      title: "活动封面",
      dataIndex: "poster",
      key: "poster",
      render: (text) => {
        return <img src={text} alt="" style={{ width: "50px" }} />;
      },
    },
    {
      title: "是否上线",
      dataIndex: "active",
      key: "ative",
      render: (active) => {
        let color = active ? "blue" : "red";
        let word = active ? "是" : "否";
        return <Tag color={color}>{word}</Tag>;
      },
    },
    {
      title: "操作",
      key: "action",
      render: (text, record,index) => {
        let {rolecode} = this.props.user.userInfo
        return (<Space size="middle">
        <Button
          type="primary"
          size="small"
          onClick={() => {
            this.handleEdit(record);
          }}
        >
          编辑
        </Button>
        <Button
          type="primary"
          size="small"
          danger
          onClick={() => {
            this.handleConfirm(record,index);
          }}
          disabled={rolecode!=='root'}
        >
          删除
        </Button>
      </Space>)
      },
    },
  ];
  handleEdit = (record) => {
    // console.log(this.props);
    let search = qs.stringify(record); //将数据对象处理为路径参数字符串
    // console.log(search);
    this.props.history.push({
      pathname: "/admin/banner/edit",
      search: `?${search}`,
    });
  };
  handleConfirm = ({objectId,title},index) => {
    // console.log(index);
    //二次确认框
    Modal.confirm({
      title: `您正在删除名称为【${title}】的活动`,
      icon: <ExclamationCircleOutlined />,
      content: "删除后数据将无法找回，确定要删除？",
      okText: "确认",
      cancelText: "取消",
      onOk: () => { //二次确认
        // console.log("确认删除",objectId);
        bannerDel(objectId).then(res=>{ //删除线上
          // 更新线下
          let idx = (this.state.page-1)*5 + index //原始数据包下标
          console.log(idx);
          let {list} = this.state
          list.splice(idx,1)
          this.setState({list:[...list]})
        })
      },
    });
  };

  componentDidMount() {
    bannerList().then((res) => {
      console.log(res);
      this.setState({
        list: res.data.results,
      });
    });
  }
  render() {
    return (
      <Table
        columns={this.columns}
        dataSource={this.state.list}
        rowKey="objectId"
        pagination={{
          pageSize: 5,
          onChange:(page,pageSize)=>{
            // console.log(page,pageSize);
            this.setState({page})
          }
        }}
      />
    );
  }
}

export default connect(({user})=>({user}))(BannerList)